let mascot;
let mascotImg;

const attachedDistance = 100;

function preload() {
  // 吉祥物
  mascotImg = loadImage("images/mascot.png");
}

function setup() {
  createCanvas(windowWidth, windowHeight); // 使用整个窗口高度
  createPromptInput();
}

// 生成输入框
function createPromptInput() {
  // 创建输入框和按钮在顶部中间
  let inputBox = createInput();
  inputBox.style("font-size", "24px");
  inputBox.size(600, 60);
  inputBox.position((width - inputBox.width) / 2, 20); // 居中位置
  inputBox.attribute("wrap", "soft");
  inputBox.style("text-align", "top");
  inputBox.style("background-color", "white");
  inputBox.style("border", "2px solid #ccc");
  inputBox.style("border-radius", "20px");
  inputBox.style("padding", "10px");
  inputBox.style("box-shadow", "0 4px 8px rgba(0,0,0,0.1)");
  inputBox.style("margin", "10px");

  let submitButton = createButton("生成");
  // 调整按钮和对话框的位置以确保它们对齐
  submitButton.position(
    inputBox.x + inputBox.width + 50,
    inputBox.y + inputBox.height / 2 - submitButton.height / 2
  );
  submitButton.style("font-size", "24px");
  submitButton.size(100, 60);
  submitButton.style("background-color", "#007bdd"); // 按钮背景色
  submitButton.style("color", "white"); // 按钮文本颜色
  submitButton.style("border-radius", "20px"); // 按钮边框圆角
  submitButton.style("border", "none"); // 按钮边框
  submitButton.style("padding", "10px 20px"); // 按钮内边距
  submitButton.style("box-shadow", "0 4px 8px rgba(0,0,0,0.1)"); // 按钮阴影
  submitButton.mousePressed(() => {
    let inputText = inputBox.value();
    console.log("Input Text:", inputText);
    let agent = new P5WANX();
    agent.send(inputText);
    agent.onComplete = (response) => {
      console.log(response);
      mascotImg = loadImage(response);
    }
  });
}

function draw() {
  image(mascotImg, 300, 300);
}